<template>
  <view class="content">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar 
      fixed 
      :bottomShadow="false" 
      backgroundColor="#020303" 
      fontColor="#FFFFFF"
      :isBack="true" 
      backTitle="返回"
      @backClick="handleBack">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-center">
        <view class="navbar-title">编辑资料</view>
      </view>
    </tn-nav-bar>

    <view class="container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 编辑次数限制提示横幅 - 简化版 -->
      <view class="edit-limit-banner-simple" :class="{'limit-reached': editLimitReached}">
        <text v-if="!editLimitReached">今日剩余编辑次数：{{remainingEdits}}</text>
        <text v-else>今日编辑次数已用完</text>
      </view>
      
      <!-- 表单内容区域 -->
      <view class="edit-form">
        <!-- 头像上传 -->
        <view class="avatar-section">
          <view class="avatar-upload-improved" @tap="chooseAvatar">
            <view v-if="!formData.avatar" class="avatar-placeholder-improved">
              <text class="tn-icon-camera"></text>
              <text class="upload-hint">上传头像</text>
            </view>
            <image v-else :src="formData.avatar" mode="aspectFill"></image>
            <view class="avatar-overlay-improved">
              <text class="tn-icon-camera"></text>
            </view>
          </view>
          <text v-if="errors.avatar" class="avatar-error">{{ errors.avatar }}</text>
        </view>

        <!-- 昵称输入 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>昵称</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper-improved" :class="{ error: errors.nickname, focused: inputFocus === 'nickname' }" @tap="focusInput('nickname')">
            <text class="input-icon tn-icon-my-fill"></text>
            <tn-input
              type="text"
              v-model="formData.nickname"
              placeholder="请输入昵称"
              maxlength="12"
              class="nickname-input"
              :focus="inputFocus === 'nickname'"
              @blur="inputFocus = ''"
            />
            <view class="input-counter" v-if="formData.nickname.length > 0">{{formData.nickname.length}}/12</view>
          </view>
          <view v-if="errors.nickname" class="form-error">{{ errors.nickname }}</view>
        </view>

        <!-- 性别选择/显示 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>性别</text>
            <text class="required" v-if="!isGenderSet">*</text>
            <text class="warning-improved" v-if="!isGenderSet">提交后不可修改</text>
          </view>
          <!-- 性别未设置时，显示可选择的选择器 -->
          <view v-if="!isGenderSet" class="input-wrapper-improved" :class="{ error: errors.gender }" @tap="openGenderSelect">
            <text class="input-icon tn-icon-sex"></text>
            <view class="gender-text">
              <text v-if="formData.gender">{{ formData.gender === 'male' ? '男' : '女' }}</text>
              <text v-else class="gender-placeholder">请选择性别</text>
            </view>
            <text class="input-icon tn-icon-right" style="color: #888; margin-right: 0rpx;"></text>
          </view>
          <!-- 性别已设置时，显示为不可修改 -->
          <view v-else class="input-wrapper-improved disabled">
            <text class="input-icon tn-icon-sex"></text>
            <view class="gender-text">
              <text>{{ formData.gender === 'male' ? '男' : '女' }}</text>
            </view>
            <view class="gender-disabled-hint">
              <text>性别不可修改</text>
            </view>
          </view>
          <view v-if="errors.gender" class="form-error">{{ errors.gender }}</view>
        </view>

        <!-- 个人简介输入 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>个人简介</text>
          </view>
          <view class="input-wrapper-improved" :class="{ error: errors.bio, focused: inputFocus === 'bio' }" @tap="openIntroductionSelect">
            <text class="input-icon tn-icon-edit"></text>
            <view class="bio-text">
              <text v-if="formData.bio">{{ formData.bio }}</text>
              <text v-else class="bio-placeholder">请选择个人简介</text>
            </view>
            <text class="input-icon tn-icon-down" style="color: #888; margin-right: 0rpx;"></text>
          </view>
          <view v-if="errors.bio" class="form-error">{{ errors.bio }}</view>

          <view class="bio-tips">
            <view class="tip-item">
              <text class="tn-icon-info-fill"></text>
              <text>一个好的个人简介可以更好地展示你的魅力</text>
            </view>
            <view class="tip-item">
              <text class="tn-icon-wand"></text>
              <text class="random-intro-btn" @tap="randomSelectIntroduction">随机生成简介</text>
            </view>
          </view>
        </view>

        <!-- 生日选择 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>生日</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper-improved" :class="{ error: errors.birthday, focused: inputFocus === 'birthday' }" @tap="openBirthdayPicker">
            <text class="input-icon tn-icon-calendar"></text>
            <view class="birthday-text">
              <text v-if="formData.birthday">{{ formData.birthday }}</text>
              <text v-else class="birthday-placeholder">请选择您的生日</text>
            </view>
            <text class="input-icon tn-icon-right" style="color: #888; margin-right: 0rpx;"></text>
          </view>
          <view v-if="errors.birthday" class="form-error">{{ errors.birthday }}</view>
        </view>

        <!-- 微信号输入 -->
        <view class="form-group-improved" v-if="!wxAuditMode">
          <view class="form-label-improved">
            <text>微信号</text>
          </view>
          <view class="input-wrapper-improved" :class="{ error: errors.wechat, focused: inputFocus === 'wechat' }" @tap="focusInput('wechat')">
            <text class="input-icon tn-icon-wechat-fill"></text>
            <tn-input
              type="text"
              v-model="formData.wechat"
              placeholder="请输入您的微信号"
              maxlength="30"
              class="wechat-input"
              :focus="inputFocus === 'wechat'"
              @blur="inputFocus = ''"
            />
            <view class="input-counter" v-if="formData.wechat.length > 0">{{formData.wechat.length}}/30</view>
          </view>
          <view v-if="errors.wechat" class="form-error">{{ errors.wechat }}</view>
        </view>

        <!-- 好友添加设置 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>好友添加设置</text>
          </view>
          <view class="friend-permission-options">
            <view class="permission-option-desc">
              <text>允许通过资料卡或帖子添加好友</text>
            </view>
            <tn-switch
              v-model="formData.allowFriendAdd"
              activeColor="#B3F73C"
              :buttonColor="formData.allowFriendAdd ? '#FFFFFF' : '#888888'"
              @change="onFriendPermissionChange"
            ></tn-switch>
          </view>
          <view class="friend-permission-tips" v-if="formData.allowFriendAdd">
            <text class="tn-icon-info-fill"></text>
            <text>他人可以通过您的资料卡或帖子直接添加您为好友</text>
          </view>
          <view class="friend-permission-tips" v-else>
            <text class="tn-icon-info-fill"></text>
            <text>他人将无法通过您的资料卡或帖子添加您为好友</text>
          </view>
        </view>

        <!-- 兴趣爱好标签 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>兴趣标签</text>
            <text class="required">*</text>
          </view>
          <view class="interests-container">
            <view class="tag-cloud">
              <view
                v-for="tag in interestTags"
                :key="tag.id"
                class="tag-item"
                :class="{ active: isInterestSelected(tag.id) }"
                @tap="toggleInterest(tag.id, tag.name)"
              >{{ tag.name }}</view>
            </view>
            <view v-if="errors.interests" class="form-error interests-error">{{ errors.interests }}</view>
            <view class="interests-tip">最多可选择5个标签，请至少选择1个标签</view>
          </view>
        </view>

        <!-- 照片管理 -->
        <view class="form-group-improved">
          <view class="form-label-improved">
            <text>我的照片</text>
            <text class="album-count">{{formData.album.length}}/9</text>
          </view>
          <view class="album-upload-area">
            <!-- 当没有照片时的空状态提示 -->
            <view class="album-empty" v-if="formData.album.length === 0">
              <text class="tn-icon-image"></text>
              <text class="empty-text">添加照片让更多人了解你</text>
              <view class="add-first-photo" @tap="choosePhotos">
                <text class="tn-icon-add"></text>
                <text>添加照片</text>
              </view>
            </view>

            <!-- 相册网格 -->
            <view class="album-grid" v-else>
              <view
                v-for="(photo, index) in formData.album"
                :key="index"
                class="album-item"
                @tap="previewPhoto(index)"
              >
                <image :src="photo" mode="aspectFill"></image>
                
                <!-- 移除预览按钮，只保留删除按钮 -->
                <view class="photo-actions">
                  <view class="photo-action delete" @tap.stop="showDeleteConfirm(index)">
                    <text class="tn-icon-delete-fill"></text>
                  </view>
                </view>
              </view>
              
              <!-- 添加照片按钮 -->
              <view class="album-item add-photo" @tap="choosePhotos" v-if="formData.album.length < 9"></view>
            </view>
            <view v-if="errors.album" class="form-error album-error">{{ errors.album }}</view>

            <!-- 提示信息 -->
            <view class="album-tips" v-if="formData.album.length > 0">
              <view class="tip-item">
                <text class="tn-icon-info-fill"></text>
                <text>点击图片可预览大图</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="bottom-buttons-container">
        <tn-button 
          :backgroundColor="editLimitReached ? '#555555' : '#B3F73C'" 
          :fontColor="editLimitReached ? '#999999' : '#1A1A1A'" 
          width="100%" 
          @click="saveProfile"
          :disabled="editLimitReached">
          {{ editLimitReached ? '明日再试' : '保存' }}
        </tn-button>
      </view>
    </view>

    <!-- 生日选择器弹窗 -->
    <tn-picker
      v-model="isBirthdayPickerVisible"
      mode="time"
      :params="{
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      }"
      :defaultTime="formData.birthday || '1994-07-18'"
      :startYear="1950"
      :endYear="currentYear"
      @confirm="onBirthdayConfirm"
      title="选择生日"
      cancelColor="#888888"
      confirmColor="#B3F73C"
      titleColor="#FFFFFF"
    />



    <!-- 性别选择器 -->
    <tn-select
      ref="genderSelect"
      v-model="isGenderSelectVisible"
      mode="single"
      :list="genderOptions"
      :defaultValue="[selectedGenderIndex >= 0 ? selectedGenderIndex : 0]"
      valueName="value"
      labelName="label"
      title="选择性别"
      cancelColor="#888888"
      confirmColor="#B3F73C"
      titleColor="#FFFFFF"
      @confirm="onGenderConfirm"
      @cancel="isGenderSelectVisible = false"
      @columnChange="onGenderColumnChange"
    >
      <template v-slot:header>
        <view class="custom-select-header">
          <view class="header-cancel" @tap="isGenderSelectVisible = false">取消</view>
          <view class="header-title">选择性别</view>
          <view class="header-confirm" @tap="onGenderSelectConfirm">确定</view>
        </view>
      </template>
    </tn-select>

    <!-- 替换为tn-select实现的个人简介选择器 -->
    <tn-select
      ref="introductionSelect"
      v-model="isIntroductionSelectVisible"
      mode="single"
      :list="formattedIntroductionOptions"
      :defaultValue="[selectedIntroIndex >= 0 ? selectedIntroIndex : 0]"
      valueName="id"
      labelName="text"
      title="选择个人简介"
      cancelColor="#888888"
      confirmColor="#B3F73C"
      titleColor="#FFFFFF"
      :showSearch="true"
      @confirm="confirmIntroduction"
      @cancel="closeIntroductionSelect"
      @columnChange="onIntroductionColumnChange"
    >
      <template v-slot:header>
        <view class="custom-select-header">
          <view class="header-cancel" @tap="closeIntroductionSelect">取消</view>
          <view class="header-title">选择个人简介</view>
          <view class="header-confirm" @tap="confirmIntroduction">确定</view>
        </view>
      </template>
    </tn-select>

    <!-- 提示框 -->
    <tn-toast ref="toast"></tn-toast>
  </view>
</template>

<script>
// 导入用户API
import * as userAPI from '@/api/user/index.js';
// 导入getIntroductionTemplates方法
import { getIntroductionTemplates } from '@/api/user/index.js';
// 添加上传API导入
import * as uploadAPI from '@/api/upload/index.js';
// 导入mapGetters
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      formData: {
        avatar: '',
        nickname: '',
        bio: '',
        birthday: '',
        gender: '',
        wechat: '',
        allowFriendAdd: true,
        album: [],
        interests: []
      },
      // 记录从后端获取的原始性别状态
      originalGender: '',
      errors: {
        avatar: '',
        nickname: '',
        bio: '',
        birthday: '',
        gender: '',
        wechat: '',
        album: '',
        interests: ''
      },
      inputFocus: '',

      // 生日选择器相关数据
      isBirthdayPickerVisible: false,

      // 性别选择器相关数据
      isGenderSelectVisible: false,
      selectedGenderIndex: -1,
      genderOptions: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' }
      ],

      // 个人简介选择相关
      isIntroductionSelectVisible: false,
      introductionOptions: [],
      selectedIntroIndex: -1,
      tempBio: '',

      // 标签数据
      interestTags: [],
      
      // 添加照片上传相关状态
      isUploading: false,
      photoUploadQueue: 0,
      photoUploading: false,
      
      // 添加编辑次数限制相关数据
      editLimitReached: false,
      remainingEdits: 3
    }
  },
  computed: {
    // 判断性别是否已设置（基于从后端获取的原始状态）
    isGenderSet() {
      return this.originalGender && this.originalGender !== '';
    },
    // 格式化后的简介选项，用于tn-select组件
    formattedIntroductionOptions() {
      return this.introductionOptions.map((item, index) => ({
        id: index,
        text: typeof item === 'object' ? item.text : item
      }));
    },
    // 从config模块获取wxAuditMode
    ...mapGetters('config', ['wxAuditMode'])
  },
  onLoad() {
    // 获取用户资料
    this.getUserProfile();
    // 获取简介模板
    this.fetchIntroductionTemplates();
    // 检查编辑次数限制
    this.checkEditLimit();
  },
  methods: {
    // 添加返回按钮点击处理方法
    handleBack() {
      uni.navigateBack({
        delta: 1
      });
    },

    // 检查编辑次数限制
    checkEditLimit() {
      // 获取当前日期字符串（格式：YYYY-MM-DD）
      const today = new Date().toISOString().split('T')[0];
      
      // 从本地存储获取上次编辑的日期和次数
      const editLimitData = uni.getStorageSync('profileEditLimit') || {};
      
      // 如果日期不是今天，重置计数
      if (editLimitData.date !== today) {
        this.remainingEdits = 3;
        this.editLimitReached = false;
        return;
      }
      
      // 设置剩余编辑次数
      this.remainingEdits = Math.max(0, 3 - (editLimitData.count || 0));
      
      // 检查是否达到今日编辑上限
      if (this.remainingEdits <= 0) {
        this.editLimitReached = true;
      } else {
        this.editLimitReached = false;
      }
    },
    
    // 更新编辑次数记录
    updateEditCount() {
      // 获取当前日期字符串
      const today = new Date().toISOString().split('T')[0];
      
      // 从本地存储获取当前记录
      const editLimitData = uni.getStorageSync('profileEditLimit') || {};
      
      // 如果是新的一天，重置计数
      const count = editLimitData.date === today ? (editLimitData.count || 0) + 1 : 1;
      
      // 保存到本地存储
      uni.setStorageSync('profileEditLimit', {
        date: today,
        count: count
      });
      
      // 更新剩余次数
      this.remainingEdits = Math.max(0, 3 - count);
      
      // 如果达到限制，设置标志
      if (this.remainingEdits <= 0) {
        this.editLimitReached = true;
      }
    },

    // 获取用户资料
    getUserProfile() {
      this.$store.dispatch('user/getUserInfo')
        .then(res => {
          if (res) {
            const userData = res;

            // 从API响应中提取数据
            const formData = {
              avatar: userData.avatar || '',
              nickname: userData.nickname || '',
              bio: userData.signature || '', // 个人简介对应signature字段
              // 修改性别映射：将数字转换为male/female格式
              gender: userData.sex === 1 ? 'male' : userData.sex === 2 ? 'female' : '',
              wechat: userData.wechat || '',
              allowFriendAdd: userData.allowFriendAdd !== undefined ? userData.allowFriendAdd : true,
              album: [],
              interests: []
            };

            // 处理生日信息：将后端返回的数组格式 [year, month, day] 转换为字符串格式 "yyyy-MM-dd"
            if (userData.birthday && Array.isArray(userData.birthday) && userData.birthday.length === 3) {
              const [year, month, day] = userData.birthday;
              // 确保月和日是两位数格式
              const formattedMonth = month < 10 ? `0${month}` : `${month}`;
              const formattedDay = day < 10 ? `0${day}` : `${day}`;
              formData.birthday = `${year}-${formattedMonth}-${formattedDay}`;
            } else if (userData.age) {
              // 如果没有birthday数据但有age数据，则使用age推算（作为备选）
              const currentYear = new Date().getFullYear();
              const birthYear = currentYear - userData.age;
              formData.birthday = `${birthYear}-01-01`;
            }

            // 处理相册图片 - 从albums对象数组提取imageUrl属性
            if (userData.albums && Array.isArray(userData.albums)) {
              // 将albums数组中的每个对象的imageUrl提取出来形成新数组
              formData.album = userData.albums.map(item => item.imageUrl);
            } else {
              // 当albums为null时，初始化为空数组
              formData.album = [];
              console.log('用户相册为空，初始化为空数组');
            }

            // 处理兴趣标签
            if (userData.interestTags && Array.isArray(userData.interestTags)) {
              formData.interests = userData.interestTags.map(tag => tag.id);
            }

            // 记录原始性别状态（用于判断是否允许编辑）
            this.originalGender = formData.gender;

            // 填充表单数据
            this.formData = formData;

            console.log('获取到的用户资料:', formData);
            console.log('原始性别状态:', this.originalGender);

            // 获取标签列表
            this.fetchTagList();
          } else {
            this.$refs.toast.show({
              title: '获取用户信息失败',
              icon: 'error'
            });
          }
        })
        .catch(err => {
          console.error('获取用户信息失败:', err);
          this.$refs.toast.show({
            title: '获取用户信息失败',
            icon: 'error'
          });
        });
    },

    // 保存资料
    saveProfile() {
      // 检查是否达到今日编辑次数限制
      if (this.editLimitReached) {
        // 简化提示内容
        this.$refs.toast.show({
          title: '今日次数已用完',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 检查是否有照片正在上传中
      if (this.photoUploading || this.photoUploadQueue > 0) {
        this.$refs.toast.show({
          title: '照片上传中，请等待上传完成',
          icon: 'none'
        });
        return;
      }
      
      // 检查相册中是否包含本地临时路径
      const hasLocalPath = this.formData.album.some(path => path.startsWith('file://') || path.startsWith('/'));
      if (hasLocalPath) {
        this.$refs.toast.show({
          title: '照片上传中，请等待上传完成',
          icon: 'none'
        });
        return;
      }

      // 验证表单
      if (!this.validateForm()) {
        return;
      }

      // 构建提交数据
      const submitData = {
        avatar: this.formData.avatar, // 添加头像字段
        nickname: this.formData.nickname,
        signature: this.formData.bio, // 转换为API需要的signature字段
        allowFriendAdd: this.formData.allowFriendAdd,
        interestTagIds: this.formData.interests,
        // 其他需要的字段可以在这里添加
      };

      // 如果性别已选择，添加性别字段（转换为API需要的数字格式）
      if (this.formData.gender) {
        submitData.sex = this.formData.gender === 'male' ? 1 : 2;
      }

      // 添加微信号字段 - 仅在非审核模式下
      if (!this.wxAuditMode && this.formData.wechat) {
        submitData.wechat = this.formData.wechat;
      }

      // 如果有生日数据，处理为后端需要的数组格式 [year, month, day]
      if (this.formData.birthday) {
        const parts = this.formData.birthday.split('-');
        if (parts.length === 3) {
          submitData.birthday = [
            parseInt(parts[0]), // 年
            parseInt(parts[1]), // 月
            parseInt(parts[2])  // 日
          ];
          
          // 同时计算年龄（如果后端需要）
          const currentYear = new Date().getFullYear();
          submitData.age = currentYear - parseInt(parts[0]);
        }
      }
      
      // 处理相册数据 - 确保与完善资料页面格式一致
      if (this.formData.album && this.formData.album.length > 0) {
        // 确保每张照片都包含imageUrl和description属性
        const albumPhotos = this.formData.album.map(imageUrl => ({
          imageUrl,
          description: '用户资料编辑相册照片'
        }));
        
        // 将相册照片数据添加到提交数据中
        submitData.albumPhotos = albumPhotos;
      }

      // 调用API提交数据 - 改为与完善资料页面相同的接口
      this.$store.dispatch('user/submitUserProfileForAudit', submitData)
        .then(res => {
          if (res) {
            // 更新今日编辑次数
            this.updateEditCount();
            
            // 显示剩余次数提示
            let successMessage = '保存成功';
            if (this.remainingEdits > 0) {
              successMessage += `，剩余${this.remainingEdits}次`;
            } else {
              successMessage += '，已用完';
            }
            
            this.$refs.toast.show({
              title: successMessage,
              icon: 'success',
              duration: 2000
            });

            // 返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          } else {
            this.$refs.toast.show({
              title: res?.msg || '保存失败',
              icon: 'error'
            });
          }
        })
        .catch(err => {
          console.error('保存用户信息失败:', err);
          this.$refs.toast.show({
            title: '保存失败，请重试',
            icon: 'error'
          });
        });
    },

    // 表单验证
    validateForm() {
      // 重置错误信息
      for (let key in this.errors) {
        this.errors[key] = '';
      }

      // 验证头像
      if (!this.formData.avatar) {
        this.errors.avatar = '请上传头像';
        this.$refs.toast.show({
          title: '请上传头像',
          icon: 'none'
        });
        return false;
      }

      // 验证昵称
      if (!this.formData.nickname) {
        this.errors.nickname = '请输入昵称';
        this.$refs.toast.show({
          title: '请输入昵称',
          icon: 'none'
        });
        return false;
      } else if (this.formData.nickname.length < 2) {
        this.errors.nickname = '昵称至少需要2个字符';
        this.$refs.toast.show({
          title: '昵称至少需要2个字符',
          icon: 'none'
        });
        return false;
      }

      // 验证性别（仅当性别未设置时）
      if (!this.isGenderSet && !this.formData.gender) {
        this.errors.gender = '请选择性别';
        this.$refs.toast.show({
          title: '请选择性别',
          icon: 'none'
        });
        return false;
      }

      // 验证生日
      if (!this.formData.birthday) {
        this.errors.birthday = '请选择生日';
        this.$refs.toast.show({
          title: '请选择生日',
          icon: 'none'
        });
        return false;
      }

      // 验证兴趣标签
      if (this.formData.interests.length < 1) {
        this.errors.interests = '请至少选择1个标签';
        this.$refs.toast.show({
          title: '请至少选择1个标签',
          icon: 'none'
        });
        return false;
      }

      // 验证相册，至少上传一张照片
      if (!this.formData.album || this.formData.album.length < 1) {
        this.errors.album = '请至少上传一张照片';
        this.$refs.toast.show({
          title: '请至少上传一张照片',
          icon: 'none'
        });
        return false;
      }

      // 所有验证通过
      return true;
    },

    // 输入框获取焦点
    focusInput(field) {
      this.inputFocus = field;
    },

    // 好友权限切换
    onFriendPermissionChange(value) {
      this.formData.allowFriendAdd = value;
    },

    // 选择照片 - 修改为实际上传
    choosePhotos() {
      const remainCount = 9 - this.formData.album.length;
      if (remainCount <= 0) {
        this.$refs.toast.show({
          title: '最多只能上传9张照片',
          icon: 'error'
        });
        return;
      }

      // 如果正在上传，不允许继续选择
      if (this.photoUploading) {
        this.$refs.toast.show({
          title: '正在上传中，请稍候',
          icon: 'none'
        });
        return;
      }

      uni.chooseImage({
        count: remainCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
            // 依次上传选择的每张图片
            res.tempFilePaths.forEach(filePath => {
              this.uploadPhoto(filePath);
            });
          }
        }
      });
    },

    // 新增上传照片方法
    async uploadPhoto(filePath) {
      try {
        // 增加上传队列计数
        this.photoUploadQueue++;
        // 设置上传中状态
        this.photoUploading = true;

        // 先使用本地路径添加到相册（用于界面立即显示）
        const localIndex = this.formData.album.length;
        this.formData.album.push(filePath);

        // 调用上传文件API
        const imageUrl = await uploadAPI.uploadFile({
          filePath: filePath,
          fileType: 'image',
          onProgress: (progress) => {
            console.log('照片上传进度:', progress);
          }
        });

        // 上传成功，替换为服务器URL
        if (localIndex < this.formData.album.length) {
          this.formData.album[localIndex] = imageUrl;
        }

        console.log('照片上传成功:', imageUrl);
        this.errors.album = '';
      } catch (error) {
        console.error('照片上传失败:', error);
        // 上传失败显示提示
        this.$refs.toast.show({
          title: '照片上传失败，请重试',
          icon: 'none'
        });
      } finally {
        // 减少上传队列计数
        this.photoUploadQueue--;
        // 如果队列为空，设置上传完成状态
        if (this.photoUploadQueue <= 0) {
          this.photoUploading = false;
          this.photoUploadQueue = 0;
        }
      }
    },

    // 修改选择头像方法
    chooseAvatar() {
      // 如果正在上传，不允许重复选择
      if (this.isUploading) {
        return;
      }

      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          // 调用上传头像方法
          this.uploadAvatar(tempFilePath);
        }
      });
    },

    // 新增上传头像方法
    async uploadAvatar(filePath) {
      this.isUploading = true;

      try {
        // 调用上传文件API
        const imageUrl = await uploadAPI.uploadFile({
          filePath: filePath,
          fileType: 'avatar',
          onProgress: (progress) => {
            console.log('头像上传进度:', progress);
          }
        });

        // 上传成功，设置头像URL为服务器返回的URL
        this.formData.avatar = imageUrl;
        this.errors.avatar = '';

        console.log('头像上传成功:', imageUrl);
      } catch (error) {
        console.error('头像上传失败:', error);
        // 即使上传失败，也使用本地路径作为临时显示
        this.formData.avatar = filePath;
        
        this.$refs.toast.show({
          title: '头像上传失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isUploading = false;
      }
    },

    // 删除照片
    deletePhoto(index) {
      this.formData.album.splice(index, 1);
    },

    // 照片预览，简化，移除拖拽相关代码
    previewPhoto(index) {      
      // 使用uni.previewImage进行全屏预览
      uni.previewImage({
        current: this.formData.album[index], // 当前显示图片的链接
        urls: this.formData.album // 需要预览的图片链接列表
      });
    },

    // 显示删除确认
    showDeleteConfirm(index) {
      uni.showModal({
        title: '删除确认',
        content: '确定要删除这张照片吗？',
        confirmColor: '#B3F73C',
        success: (res) => {
          if (res.confirm) {
            this.deletePhoto(index);
          }
        }
      });
    },

    // 打开个人简介选择器
    openIntroductionSelect() {
      // 查找当前简介在选项中的索引
      if(this.formData.bio) {
        const index = this.introductionOptions.findIndex(item => 
          item.text === this.formData.bio
        );
        if(index !== -1) {
          this.selectedIntroIndex = index;
        }
      }
      this.isIntroductionSelectVisible = true;
    },

    // 关闭个人简介选择器
    closeIntroductionSelect() {
      this.isIntroductionSelectVisible = false;
    },

    // 确认个人简介选择
    confirmIntroduction() {
      // 获取当前选中值
      const tnSelect = this.$refs.introductionSelect;

      if (tnSelect && tnSelect.selectValue && tnSelect.selectValue.length > 0) {
        // 使用组件内部的选中值
        const currentIndex = tnSelect.selectValue[0].value;
        if (currentIndex !== undefined && this.introductionOptions[currentIndex]) {
          this.formData.bio = this.introductionOptions[currentIndex].text;
          this.errors.bio = '';
        }
      }
      
      this.closeIntroductionSelect();
    },

    // 随机选择个人简介
    randomSelectIntroduction() {
      if (this.introductionOptions.length > 0) {
        const randomIndex = Math.floor(Math.random() * this.introductionOptions.length);
        this.selectedIntroIndex = randomIndex;
        this.formData.bio = this.introductionOptions[randomIndex].text;
        this.errors.bio = '';
      }
    },

    // 获取标签列表
    async fetchTagList() {
      try {
        // 修改：直接使用API调用而不是通过Vuex
        const result = await userAPI.getTagList();
        console.log('获取到的标签数据:', result);

        // 处理后端返回的标签数据
        const tagList = result.data || result;

        if (Array.isArray(tagList)) {
          // 设置标签选中状态
          this.interestTags = tagList.map(tag => {
            return {
              ...tag,
              selected: this.formData.interests.includes(tag.id)
            };
          });
        }
      } catch (error) {
        console.error('获取标签列表失败:', error);
        this.$refs.toast.show({
          title: '获取标签列表失败',
          icon: 'error'
        });
      }
    },

    // 切换兴趣标签选择状态
    toggleInterest(tagId) {
      const index = this.formData.interests.indexOf(tagId);

      if (index === -1) {
        // 限制最多选择5个标签
        if (this.formData.interests.length >= 5) {
          this.$refs.toast.show({
            title: '最多选择5个标签',
            icon: 'none'
          });
          return;
        }

        this.formData.interests.push(tagId);
      } else {
        this.formData.interests.splice(index, 1);
      }

      // 清除错误提示
      this.errors.interests = '';
    },

    // 检查标签是否被选中
    isInterestSelected(tagId) {
      return this.formData.interests.includes(tagId);
    },

    // 生日选择器确认
    onBirthdayConfirm(e) {
      // 更新生日数据
      this.formData.birthday = e.year + '-' + e.month + '-' + e.day;
      this.errors.birthday = '';
    },

    // 打开生日选择器
    openBirthdayPicker() {
      this.isBirthdayPickerVisible = true;
    },

    // 性别选择器相关方法
    openGenderSelect() {
      if (this.isGenderSet) {
        // 如果性别已设置，不允许修改
        return;
      }
      
      // 先找出当前选中项的索引
      if (this.formData.gender) {
        const index = this.genderOptions.findIndex(option => option.value === this.formData.gender);
        if (index > -1) {
          this.selectedGenderIndex = index;
        }
      }
      this.isGenderSelectVisible = true;
      this.errors.gender = '';
    },

    // 参考profile-setup.vue的onIntroductionConfirm方法实现
    onGenderConfirm(e) {
      // 如果事件返回了选中值且有有效值
      if (e && e.length > 0 && e[0] && e[0].value) {
        this.formData.gender = e[0].value;
        this.errors.gender = '';
        console.log('从事件获取性别值：', e[0].value);
      }
      // 否则使用当前选择的索引
      else if (this.genderOptions && this.genderOptions.length > 0 &&
          this.selectedGenderIndex >= 0 && this.selectedGenderIndex < this.genderOptions.length) {
        const currentValue = this.genderOptions[this.selectedGenderIndex].value;
        this.formData.gender = currentValue;
        this.errors.gender = '';
        console.log('从索引获取性别值：', currentValue);
      }
      // 如果上述两种方式都无法获取值，则使用第一个选项
      else if (this.genderOptions && this.genderOptions.length > 0) {
        this.formData.gender = this.genderOptions[0].value;
        this.errors.gender = '';
        console.log('使用默认第一个性别值：', this.genderOptions[0].value);
      } else {
        console.log('无法获取有效的性别值');
      }
    },

    // 手动处理确认点击 - 参考profile-setup.vue的onSelectConfirmClick
    onGenderSelectConfirm() {
      // 获取当前选中值
      const tnSelect = this.$refs.genderSelect;

      if (tnSelect && tnSelect.selectValue && tnSelect.selectValue.length > 0) {
        // 使用组件内部的选中值
        const currentValue = tnSelect.selectValue[0].value;
        if (currentValue) {
          this.formData.gender = currentValue;
          this.errors.gender = '';
        }
      } else {
        // 回退到通过索引获取值
        if (this.genderOptions && this.genderOptions.length > 0 &&
            this.selectedGenderIndex >= 0 && this.selectedGenderIndex < this.genderOptions.length) {
          const currentValue = this.genderOptions[this.selectedGenderIndex].value;
          // 设置值
          this.formData.gender = currentValue;
          this.errors.gender = '';
        } else {
          // 如果没有有效的选择，使用第一个选项
          if (this.genderOptions && this.genderOptions.length > 0) {
            this.formData.gender = this.genderOptions[0].value;
            this.errors.gender = '';
          }
        }
      }

      this.isGenderSelectVisible = false;
    },

    // 监听性别选择列变化事件 - 参考onIntroductionColumnChange
    onGenderColumnChange(e) {
      // 更新当前选中的索引
      if (e && e.detail && e.detail.value && e.detail.value.length > 0) {
        this.selectedGenderIndex = e.detail.value[0];
        console.log('性别选择变更为索引:', this.selectedGenderIndex);
      } else {
        console.log('性别选择变更事件触发，但没有有效值', e);
      }
    },



    // 获取简介模板
    async fetchIntroductionTemplates() {
      try {
        const result = await getIntroductionTemplates();
        const templateList = result.data || result;
        
        // 直接使用后端返回的数据结构
        this.introductionOptions = templateList.map(item => ({
          id: item.id, // 使用后端返回的id
          text: item.content // 使用content作为显示文本
        }));
        
        // 如果获取数据失败，设置默认模板
        if (!this.introductionOptions || this.introductionOptions.length === 0) {
          this.setDefaultTemplates();
        }
        
        // 如果用户已有简介，找到对应的选项
        if (this.formData.bio) {
          const index = this.introductionOptions.findIndex(item => 
            item.text === this.formData.bio
          );
          if (index !== -1) {
            this.selectedIntroIndex = index;
          }
        }
      } catch (error) {
        console.error('获取介绍模板失败:', error);
        // 加载失败时设置默认模板
        this.setDefaultTemplates();
      }
    },

    // 设置默认模板（仅在API调用失败时使用）
    setDefaultTemplates() {
      this.introductionOptions = [
        { id: 1, text: '热爱电竞游戏，寻找一起开黑的好友' },
        { id: 2, text: '喜欢社交，希望认识更多有趣的人' },
        { id: 3, text: '游戏高手，擅长竞技类游戏，欢迎挑战' },
        { id: 4, text: '休闲玩家，享受游戏的乐趣，不在乎输赢' },
        { id: 5, text: '我是一个热爱生活的人，喜欢结交新朋友，期待与你分享生活的精彩' },
        { id: 6, text: '简单随性，享受当下。不善言辞，但很真诚，希望能认识更多志同道合的朋友' }
      ];
    },

    // 监听选择列变化事件
    onIntroductionColumnChange(e) {
      // 更新当前选中的索引
      if (e && e.detail && e.detail.value && e.detail.value.length > 0) {
        this.selectedIntroIndex = e.detail.value[0];
        console.log('选择变更为索引:', this.selectedIntroIndex);
      } else {
        console.log('选择变更事件触发，但没有有效值', e);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #020303;
  min-height: 100vh;
}

/* 导航栏返回按钮样式 */
.nav-back {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 32rpx;
  padding-left: 30rpx;
}

.back-text {
  margin-left: 10rpx;
  font-size: 30rpx;
}

/* 导航栏标题样式 */
.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.container {
  max-width: 750rpx;
  padding: 40rpx;
}

.edit-form {
  padding-bottom: 150rpx;
}

/* 头像上传区域 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar-upload-improved {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.05);

  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-placeholder-improved {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #B3F73C;

    .tn-icon-camera {
      font-size: 48rpx;
      margin-bottom: 10rpx;
    }

    .upload-hint {
      font-size: 24rpx;
    }
  }

  .avatar-overlay-improved {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 32rpx;
  }
}

.avatar-error {
  margin-top: 10rpx;
  color: #ff4d4f;
  font-size: 24rpx;
}

/* 表单组样式 */
.form-group-improved {
  margin-bottom: 40rpx;
}

.form-label-improved {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 允许在小屏幕上换行 */

  text {
    color: #fff;
    font-size: 30rpx;
  }

  .required {
    color: #ff4d4f;
    margin-left: 10rpx;
  }

  .album-count {
    color: #999;
    font-size: 24rpx;
    margin-left: 10rpx;
  }

  .warning-improved {
    color: #E6A23C;
    font-size: 22rpx;
    margin-left: 20rpx;
  }
}

.input-wrapper-improved {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s;

  &.focused {
    border-color: #B3F73C;
  }

  &.error {
    border-color: #ff4d4f;
  }

  .input-icon {
    font-size: 36rpx;
    color: #B3F73C;
    margin-right: 20rpx;
	line-height: 70rpx;
  }

  .nickname-input, .wechat-input {
    flex: 1;
    color: #fff;
    font-size: 28rpx;
  }

  .input-counter {
    color: #999;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
}

.textarea-wrapper {
  padding: 20rpx;
  height: 180rpx;
  align-items: flex-start;

  .bio-input {
    width: 100%;
    height: 140rpx;
    color: #fff;
    font-size: 28rpx;
  }
}

.form-error {
  color: #ff4d4f;
  font-size: 24rpx;
  margin-top: 8rpx;
  padding-left: 20rpx;
}

.birthday-text, .gender-text {
  flex: 1;
  color: #fff;
  font-size: 28rpx;

  .birthday-placeholder, .gender-placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}

/* 好友权限样式 */
.friend-permission-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;
  padding: 30rpx;

  .permission-option-desc {
    color: #fff;
    font-size: 28rpx;
  }
}

.friend-permission-tips {
  display: flex;
  align-items: center;
  padding: 20rpx 0 0 20rpx;

  .tn-icon-info-fill {
    color: #B3F73C;
    font-size: 24rpx;
    margin-right: 10rpx;
  }

  text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 24rpx;
  }
}

/* 相册区域样式 */
.album-upload-area {
  margin-top: 20rpx;
}

.album-grid {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 20rpx;
  width: 100%;
  gap: 15rpx;
}

/* 移除拖拽相关样式 */
.drag-hint-inline,
.drag-status-indicator,
.dragging,
.drag-over {
  display: none;
}

.album-item {
  position: relative;
  width: calc((100% - 30rpx) / 3); /* 一行三个，两个间隙共30rpx */
  height: 220rpx;
  background-color: #222;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  
  transition: all 0.2s ease;

  image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .photo-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
  }

  .photo-action {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;

    &.delete {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      background-color: rgba(0, 0, 0, 0.4);
      border: 1rpx solid rgba(255, 77, 79, 0.5);
    }

    .tn-icon-delete-fill {
      color: #ff4d4f;
      font-size: 28rpx;
    }
  }

  &.add-photo {
    border: 2rpx dashed rgba(179, 247, 60, 0.5);
    background-color: rgba(179, 247, 60, 0.1);
    transition: all 0.3s ease;

    &:active {
      background-color: rgba(179, 247, 60, 0.2);
    }

    &::before {
      content: '+';
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 64rpx;
      font-weight: 300;
      color: #B3F73C;
    }

    &::after {
      content: '添加照片';
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      color: #B3F73C;
      width: 100%;
      text-align: center;
    }
  }
}

.album-error {
  margin-top: 20rpx;
}

/* 底部按钮区域 */
.bottom-buttons-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30rpx;
  background-color: #020303;
  z-index: 9;
}

/* 生日选择器样式 */
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);

  .picker-action {
    color: #999;
    font-size: 28rpx;
  }

  .picker-title {
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }

  .confirm {
    color: #B3F73C;
  }
}

.birthday-picker {
  width: 100%;
  height: 480rpx;

  .picker-item {
    line-height: 80rpx;
    text-align: center;
    color: #fff;
  }
}

.album-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60rpx 40rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;

  .tn-icon-image {
    font-size: 80rpx;
    color: rgba(179, 247, 60, 0.7);
    margin-bottom: 20rpx;
  }

  .empty-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }

  .add-first-photo {
    margin-top: 20rpx;
    padding: 20rpx 40rpx;
    background-color: rgba(179, 247, 60, 0.2);
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
      background-color: rgba(179, 247, 60, 0.3);
    }

    .tn-icon-add {
      font-size: 32rpx;
      margin-right: 10rpx;
      color: #B3F73C;
    }

    text {
      color: #B3F73C;
      font-size: 28rpx;
    }
  }
}

.album-tips {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12rpx;

  .tip-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .tn-icon-info-fill {
      color: #B3F73C;
      font-size: 24rpx;
      margin-right: 10rpx;
    }

    text {
      color: rgba(255, 255, 255, 0.6);
      font-size: 24rpx;
    }
  }
}

.bio-text {
  flex: 1;
  color: #fff;
  font-size: 28rpx;

  .bio-placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}

.intro-options-container {
  max-height: 600rpx;
}

.intro-options-scroll {
  max-height: 600rpx;
}

.intro-option-item {
  padding: 30rpx;
  color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  line-height: 1.5;

  &.selected {
    background-color: rgba(179, 247, 60, 0.1);
    color: #B3F73C;
  }
}

.bio-tips {
  margin-top: 20rpx;

  .tip-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .tn-icon-info-fill, .tn-icon-wand {
      color: #B3F73C;
      font-size: 24rpx;
      margin-right: 10rpx;
    }

    text {
      color: rgba(255, 255, 255, 0.6);
      font-size: 24rpx;
    }

    .random-intro-btn {
      color: #B3F73C;
      text-decoration: underline;
    }
  }
}

/* 性别显示相关样式 */
.gender-text {
  flex: 1;
  color: #fff;
  font-size: 28rpx;
}

.gender-disabled-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 24rpx;
  padding-right: 10rpx;
}

.input-wrapper-improved.disabled {
  opacity: 0.8;
  cursor: not-allowed;

  &:active {
    border-color: transparent;
  }
}

/* 添加的兴趣标签样式 */
.interests-container {
  margin-bottom: 20rpx;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.tag-item {
  padding: 16rpx 30rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 2rpx solid rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #fff;
  transition: all 0.3s;

  &:active {
    opacity: 0.8;
  }
}

.tag-item.active {
  background: rgba(179, 247, 60, 0.1);
  border-color: #B3F73C;
  color: #B3F73C;
  transform: translateY(-2rpx);
}

.interests-error {
  margin-top: 0;
  margin-bottom: 16rpx;
}

.interests-tip {
  text-align: center;
  font-size: 26rpx;
  color: #888;
  padding: 10rpx 0;
}

/* 自定义select组件样式 */
.custom-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #1a1a1a;
  border-bottom: 2rpx solid #222;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.header-cancel {
  font-size: 28rpx;
  color: #888;
  padding: 10rpx;
}

.header-confirm {
  font-size: 28rpx;
  color: #B3F73C;
  padding: 10rpx;
}

/* 添加脉冲动画效果 */
@keyframes pulse {
  from {
    box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.5);
  }
  to {
    box-shadow: 0 0 30rpx rgba(179, 247, 60, 0.8);
  }
}

.custom-nav {
  position: relative;
  height: 100%;
  width: 100%;
  
  .navbar-title {
    font-size: 36rpx;
    font-weight: 500;
  }
}

/* 编辑次数限制横幅 */
.edit-limit-banner {
  display: none; /* 隐藏旧的横幅 */
}

/* 简化版编辑次数限制提示 */
.edit-limit-banner-simple {
  text-align: center;
  padding: 16rpx 0;
  margin-bottom: 30rpx;
  background-color: rgba(179, 247, 60, 0.05);
  border-radius: 8rpx;
  
  text {
    color: #B3F73C;
    font-size: 28rpx;
  }
  
  &.limit-reached {
    background-color: rgba(255, 77, 79, 0.05);
    
    text {
      color: #ff4d4f;
    }
  }
}
</style>
